<template>
  <div class="main-container">
    <el-row :gutter="5">
      <el-col
        v-for="(item, index) of dataList"
        :key="index"
        :xs="24"
        :sm="12"
        :md="6"
        class="item-wrapper"
      >
        <DataItem :data-model="item">
          <template
            v-if="index === 0"
            #extra="{ extra }"
          >
            <div class="margin-top-lg">
              <div>
                较昨日新增：{{ extra.data }}
                <i class="el-icon-caret-top text-green"></i>
              </div>
              <div class=" margin-top-sm">
                较上周新增：{{ extra.data1 }}
                <i class="el-icon-caret-top text-blue"></i>
              </div>
            </div>
          </template>
          <template
            v-else-if="index === 1"
            #extra="{ extra }"
          >
            <div
              class="margin-top"
              style="position: relative"
            >
              <div>
                较昨日新增：{{ extra.data }}
                <i class="el-icon-caret-top text-green"></i>
              </div>
              <div class=" margin-top-sm">
                较上周新增：{{ extra.data1 }}
                <i class="el-icon-caret-top text-blue"></i>
              </div>
              <div class="stack-avatar-wrapper">
                <StackAvatar />
              </div>
            </div>
          </template>
          <template
            v-else-if="index === 2"
            #extra="{ extra }"
          >
            <el-progress
              :text-inside="true"
              :stroke-width="15"
              :percentage="extra.data"
              status="exception"
            />
          </template>
          <template
            v-else-if="index === 3"
            #extra
          >
            <OrderChart ref="mOrderChart" />
          </template>
        </DataItem>
      </el-col>
    </el-row>
    <el-row
      :gutter="5"
      class="margin-top-sm"
    >
      <el-col :span="24">
        <FullYearSalesChart ref="fullYearSalesChart" />
      </el-col>
    </el-row>
    <el-row
      :gutter="5"
      class="margin-top-sm"
    >
      <el-col
        :xs="24"
        :sm="12"
        :md="6"
      >
        <SalesChart ref="salesChart" />
      </el-col>
      <el-col
        :xs="24"
        :sm="12"
        :md="6"
      >
        <StudentChart ref="studentChart" />
      </el-col>
      <el-col
        :xs="24"
        :sm="12"
        :md="6"
      >
        <EnrollmentChannelsChart ref="enrollmentChannelsChart" />
      </el-col>
      <el-col
        :xs="24"
        :sm="12"
        :md="6"
      >
        <DepartmentChart ref="departmentChart" />
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import DataItem from "./components/DataItem.vue";
import OrderChart from "./components/chart/OrderChart.vue";
import SalesChart from "./components/chart/SalesChart.vue";
import StudentChart from "./components/chart/StudentChart.vue";
import EnrollmentChannelsChart from "./components/chart/EnrollmentChannelsChart.vue";
import DepartmentChart from "./components/chart/DepartmentChart.vue";
import FullYearSalesChart from "./components/chart/FullYearSalesChart.vue";
import {
  computed,
  defineComponent,
  onMounted,
  ref,
  watch,
} from "@vue/runtime-core";
import { useLayoutStore } from "@/layouts/hooks";
export default defineComponent({
  name: "Home",
  components: {
    DataItem,
    OrderChart,
    SalesChart,
    StudentChart,
    EnrollmentChannelsChart,
    DepartmentChart,
    FullYearSalesChart,
  },
  setup() {
    const layoutStore = useLayoutStore();
    const mOrderChart = ref<InstanceType<typeof OrderChart>>();
    const salesChart = ref<InstanceType<typeof SalesChart>>();
    const departmentChart = ref<InstanceType<typeof DepartmentChart>>();
    const enrollmentChannelsChart =
      ref<InstanceType<typeof EnrollmentChannelsChart>>();
    const studentChart = ref<InstanceType<typeof StudentChart>>();
    const fullYearSalesChart = ref<InstanceType<typeof FullYearSalesChart>>();
    const onResize = () => {
      setTimeout(() => {
        mOrderChart.value?.updateChart();
        salesChart.value?.updateChart();
        departmentChart.value?.updateChart();
        enrollmentChannelsChart.value?.updateChart();
        studentChart.value?.updateChart();
        fullYearSalesChart.value?.updateChart();
      }, 500);
    };
    const collapse = computed(() => {
      return layoutStore.state.isCollapse;
    });
    watch(collapse, (newVal: boolean) => {
      onResize();
    });
    return {
      collapse,
      mOrderChart,
      salesChart,
      departmentChart,
      enrollmentChannelsChart,
      studentChart,
      fullYearSalesChart,
      dataList: [
        {
          title: "今日访问量",
          data: "+1000",
          bottomTitle: "总访问量",
          totalSum: "100万+",
          extra: {
            data: 1000,
            data1: 2350,
          },
        },
        {
          title: "新增用户",
          data: "+500",
          bottomTitle: "总用户量",
          totalSum: "200万+",
          extra: {
            data: 700,
            data1: 968,
          },
        },
        {
          title: "当月销售额",
          data: "￥50000",
          bottomTitle: "累计销售额",
          totalSum: "2000万+",
          extra: {
            data: 80,
          },
        },
        {
          title: "当月订单量",
          data: "189笔",
          bottomTitle: "累计订单量",
          totalSum: "1万+",
          extra: {
            data: 80,
          },
        },
      ],
    };
  },
});
</script>

<style lang="scss" scoped>
@media screen and (max-width: 992px) {
  .item-wrapper {
    margin-bottom: 5px;
  }
  .map-margin-tb {
    margin: 5px 0;
  }
}
.light {
  .chart-item {
    background-color: #fff;
  }
}
.stack-avatar-wrapper {
  position: absolute;
  right: -2%;
  top: 10%;
}
</style>
